<template>
  <el-dialog v-model="dialogVisible" width="80vw" title="库存锁定" :before-close="closeDialog">
    <div>
      <el-table
        class="m-t-10px"
        :data="dataList"
        border
        ref="tableRef"
        :cell-style="{ textAlign: 'center' }"
        :header-cell-style="{ textAlign: 'center' }"
        max-height="calc(70vh - 170px)"
      >
        <el-table-column
          :label="t('expandCustomer.serialNumber')"
          prop="id"
          :show-overflow-tooltip="true"
          width="100"
        />
        <el-table-column
          :label="t('order.orderCode')"
          prop="id"
          :show-overflow-tooltip="true"
          width="200"
        >
          <template #default="scope">
            <ElLink @click="handleJump(scope.row)" type="primary">{{ scope.row.order_no }}</ElLink>
          </template>
        </el-table-column>
        <el-table-column
          prop="product_name"
          :label="t('product.cname')"
          align="center"
          header-align="center"
          min-width="200"
        />
        <el-table-column
          prop="warehouse_name"
          :label="t('warehouse.name')"
          align="center"
          header-align="center"
          min-width="100"
        />
        <el-table-column
          prop="is_futures"
          :label="t('inventory.is_futures')"
          align="center"
          header-align="center"
          min-width="100"
        >
          <template #default="{ row }">
            {{ useEnumeratePicker(operatorOptions.is_futures, row.is_futures) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="arrival_date"
          :label="t('purchase.delivery_date')"
          align="center"
          header-align="center"
          min-width="100"
        />
        <el-table-column
          :label="t('purchase.current_locked_quantity')"
          prop="lock_qty"
          align="center"
          header-align="center"
        />
        <el-table-column
          :label="t('wholesalOrder.order_pay_time')"
          prop="pay_time"
          align="center"
          header-align="center"
          min-width="120"
        />
      </el-table>
    </div>
    <template #footer>
      <div class="flex">
        <span class="p-15px !pt-0">锁定数量合计: {{ lockedQtyTotal }}</span>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { useI18n } from '@/hooks/web/useI18n'
import { warehouseCountLockOrderApi } from '@/api/warehouse/index'
import { useEnumeratePicker } from '@/utils'

const { push } = useRouter()
const props = defineProps({
  shopInfo: {
    type: Object,
    default: () => {}
  },
  operatorOptions: {
    type: Object,
    default: () => {}
  }
})
const { t } = useI18n()
const lockedQtyTotal = computed(() => {
  try {
    return dataList.value?.reduce((acc, curr) => acc + curr.lock_qty, 0)
  } catch (error) {
    return 0
  }
})
const dialogVisible = ref<boolean>(false)
//获取数据
const dataList = ref<any>([])
const getData = async () => {
  const resp = await warehouseCountLockOrderApi({
    product_id: props.shopInfo.product_id,
    warehouse_id: props.shopInfo.warehouse_id,
    is_futures: props.shopInfo.is_futures,
    arrival_date: props.shopInfo.arrival_date
  })
  if (resp && resp.data) {
    dataList.value = resp.data.list
  } else {
    dataList.value = []
  }
}
const closeDialog = () => {
  dialogVisible.value = false
  console.log('关闭', dialogVisible.value)
}
//跳转
const handleJump = (row: any) => {
  if ('order' === row.order_category) {
    push({
      path: `/order/order-management/detail`,
      query: { id: row.id }
    })
  } else {
    push({
      path: `/order/wholesal-order-management/detail`,
      query: { id: row.id }
    })
  }
}
defineExpose({
  dialogVisible,
  getData
})
</script>
<style lang="less" scoped></style>
